<template>
	<view class="container">
		
		<!-- <view class="recharge_detail_wrap ">
			<image src="/static/coupon_default.png" mode="widthFix" class="qian_img"></image>
			<view class="uni-flex qianabo uni-flex-align uni-flex-center">
				<view class="wenzi">可用余额 </view>
				<view class="address">
					{{dataInfo.balance}}
				</view>
			</view>
			
		</view> -->
		
		<view class="user_list block_div">
			<view class="list uni-flex uni-flex-bt uni-flex-align">
				<view class="left uni-flex uni-flex-align">
					<view class="wenzi">充值方式</view>
				</view>
				<view class="right uni-flex uni-flex-align">
					<view class="">微信</view>
					<text class="cuIcon cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="common_list block_div">
			<view class="title">充值金额</view>
			<view class="inpt uni-flex uni-flex-align">
				<input type="number" v-model="price" placeholder="请输入充值金额" placeholder-style="color:#999">
				<!-- <view class="wenzi">CNY</view> -->
			</view>
			<view class="flex flex-align flex-end" style="margin-top: 20rpx;">
				<view class="" style="color: #f20;" @click="go_url('/pages/tixian/cz_jilu')">充值记录</view>
			</view>
		</view>
		
		<!-- <view class="common_list block_div" style="margin-top: 20rpx;">
			<view class="title">交易密码</view>
			<view class="inpt uni-flex uni-flex-align">
				<input type="password" v-model="password" placeholder="请输入交易密码" placeholder-style="color:#999">
			</view>
		</view> -->
		<!-- <view class="tips1" v-html="dataInfo.withdraw"> </view> -->
		<view class="btns" @click="tui.dianji(submite)">提交</view>
		<tui-modal :show="modal" @click="handleClick" @cancel="modal=false" title="提示" content="是否已完成充值？"></tui-modal>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				type:0,
				price:'',
				popupShow:false,
				dataInfo:'',
				list:'',
				ti_info:'',
				password:'',
				is_open:false,
				modal:false
			}
		},
		onLoad(e) {
		},
		onShow() {
			let that = this
			this.getInfo()
			if(uni.getStorageSync('isChongzhi')){
				that.modal = true
			}
		},
		onNavigationBarButtonTap() {
			this.tui.href('/pages/tixian/tixian_record')
		},
		methods: {
			hidePopup(){
				this.popupShow = false
			},
			go_url(e){
				this.tui.href(e)
				this.popupShow = false
			},
			handleClick(e){
				let index = e.index;
				if (index === 0) {
					uni.setStorageSync('isChongzhi',"")
				} else {
					uni.redirectTo({
						url:'/pages/tixian/cz_jilu',
					})
					uni.setStorageSync('isChongzhi',"")
				}
				this.modal = false
			},
			getInfo(){
				let that = this
				that.tui.request('api.auth.center/get', "POST",{}, false, false, true).then((res) => {
					if(res.code==1){
						that.dataInfo = res.data
					}
				}).catch((res) => {})
			},
			submite(){
				let that = this
				if(that.price ==''){
					that.tui.toast('充值金额不能为空')
					return false
				}
				
				that.tui.request('api.auth.live/recharge', "POST",{price:that.price,payment_code:that.dataInfo.pay_new_switch}, false, false, true).then((res) => {
					// that.tui.toast(res.info)
					if(res.code==1){
						if(that.dataInfo.pay_switch==6){
							uni.setStorageSync('isChongzhi',res.data.param)
							window.location.href = res.data.param.url;
						}else if(that.dataInfo.pay_switch==5){
							window.location.href = res.data.param.url;
						}else {
							function onBridgeReady() {
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', {
										"appId": res.data.param.appId, //公众号名称，由商户传入     
										"timeStamp": res.data.param.timeStamp, //时间戳，自1970年以来的秒数     
										"nonceStr": res.data.param.nonceStr, //随机串     
										"package": res.data.param.package,
										"signType": res.data.param.signType, //微信签名方式：     
										"paySign": res.data.param.paySign, //微信签名 
									},
									function(res) {
										if (res.err_msg == "get_brand_wcpay_request:ok") {
											setTimeout(function(){
												uni.redirectTo({
													url:'/pages/tixian/cz_jilu',
												})
											},1000)
											// 使用以上方式判断前端返回,微信团队郑重提示：
											// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										}
										
									});
							}
							if (typeof WeixinJSBridge == "undefined") {
								if (document.addEventListener) {
									document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
								} else if (document.attachEvent) {
									document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
									document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
								}
							} else {
								onBridgeReady();
							}
						}
						
						that.price = ''
					}
					
				}).catch((res) => {})
				
			}
		}
	}
</script>

<style lang="scss">
	input{height: auto;line-height: inherit;}
	.common_list{margin:0 20rpx 0rpx;padding: 30rpx;background: #fff;
		.title{margin-bottom: 40rpx;color: #999;margin-top: 20rpx;}
		.inpt{
			input{font-size: 24rpx;border-bottom: 1px solid #eee;width: 100%;padding-bottom: 20rpx;}
			.wenzi{color: #999;}
		}
	}
	.recharge_detail_wrap{margin: 20rpx;text-align: center;padding: 60rpx 0;background: linear-gradient(#fe3b0f, #fc603a);
		.qian_img{width:100rpx;border-radius: 100%;}
		.address{color: #fff;font-weight: bold;font-size: 36rpx;}
		.qianabo{color: #fff;margin: 20rpx 0;
			.wenzi{margin-right: 10rpx;}
		}
		.bank_list{padding: 0 30rpx;
			.title{color: #999;padding:0 10rpx 10rpx;}
			.list{border-bottom: 1px solid #eee;padding: 10rpx 10rpx 20rpx;margin-bottom: 20rpx;
				.right{
					image{width: 30rpx;}
				}
			}
		}
	}
	.user_list{margin: 20rpx;background: #fff;padding: 0 30rpx;
		.list{padding: 30rpx 0;
			.wenzi{font-size: 28rpx;color: #999;}
			.right{color: #999;}
		}
	}
	.tips1{color: $base;padding: 30rpx;line-height: 1.6;}
	.btns{    height: 80rpx;line-height: 80rpx;font-size: 32rpx;width: 80%;background:$base;border-radius: 46rpx;color: #fff;margin: 180rpx auto 30rpx;text-align: center;}
	
	.popup_main{border-radius: 32rpx 32rpx 0 0;overflow: hidden;
	.title{ position: relative;-webkit-uni-flex-shrink: 0;uni-flex-shrink: 0;padding: 40rpx 32rpx;color: #969799;font-size: 28rpx;text-align: center;border-bottom: 1px solid #eee;}
	.list_wu{color: rgb(255, 0, 0);text-align: left;padding: 20rpx 32rpx 40rpx;font-size: 28rpx;}}
	.wallet_list{
		.list{background: #fff;margin:10rpx 30rpx 30rpx;padding: 30rpx 0;border-bottom: 1px solid #eee;
			.left{
				image{width: 80rpx;border-radius: 100%;margin-right: 10rpx;}
				.wenben{
					.name{margin-bottom: 10rpx;}
					.miaoshu{color: #999;}
				}
			}
			.right{color: #999;}
		}
	}
</style>
